import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class InputChipDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => InputChipState();
}

class InputChipState extends State<InputChipDemo> {
  List<String> list = [
    "摇滚",
    "音乐",
    "机车党",
    "Android工程师",
    "全栈",
    "Python",
    "UI设计师",
    "测试小姐姐",
    "后台单身狗",
    "产品老大",
    "路边摊",
    "火锅 串串 麻辣烫",
    "篮球",
    "摄影",
    "户外",
    "客服",
    "超级自恋的小哥哥",
    "直播",
    "不忘初心 继续前行",
    "记性不好",
    "花容月貌",
    "榴莲控",
    "一定要穿美美的衣服"
  ];
  List<String> _filters = <String>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InputChip'),
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: Wrap(
          //主轴间距
          spacing: 5,
          //副轴间距
          runSpacing: 8,
          //主轴对齐方式
          alignment: WrapAlignment.end,
          //副轴对齐方式
          crossAxisAlignment: WrapCrossAlignment.center,
          children: List<Widget>.generate(
            list.length,
            (int index) {
              return _buildItem(index);
            },
          ).toList(),
        ),
      ),
    );
  }

  Widget _buildItem(int index) {
    String content = list[index];
    return InputChip(
      label: Text(content),
      labelStyle: TextStyle(color: Colors.black54),
      avatar: CircleAvatar(
        backgroundImage: AssetImage('images/index_01.png'),
        radius: 12,
      ),
      shadowColor: Colors.grey,
      deleteIcon: Icon(
        Icons.close,
        color: Colors.black54,
        size: 14,
      ),
      onDeleted: () {
        setState(() {
          list.removeAt(index);
        });
      },
      onSelected: (bool selected) {
        setState(() {
          if (selected) {
            _filters.add(list[index]);
          } else {
            _filters.removeWhere((String name) {
              return name == list[index];
            });
          }
        });
      },
      selectedColor: Colors.orange,
      disabledColor: Colors.grey,
      selected: _filters.contains(list[index]),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    );
  }
}
